<template>
  <div>
    <el-breadcrumb separator="/" style="margin-top: 20px">
      <el-breadcrumb-item :to="{ path: '/manager/order/tackOut' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/manager/sender/qualification' }"
        >配送员资格</el-breadcrumb-item
      >
    </el-breadcrumb>

    <el-dialog title="配送员申请" v-model="senderDialog">
      <el-form :model="form" label-width="120px">
        <el-form-item label="手机号码">
          <el-input placeholder="请填写手机号码" :maxLength="20" v-model="form.phone" />
        </el-form-item>

        <el-form-item label="身份证照片">
          <el-upload
            v-model:file-list="form.idCardCopyImg"
            action="/api/upload/img"
            :headers="tokenBody"
            list-type="picture-card"
            :on-remove="handleRemoveIdcard"
            :on-success="hanleSuccessIdcard"
            limit="1"
            ><el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="学生证照片">
          <el-upload
            v-model:file-list="form.StudentCopyImg"
            action="/api/upload/img"
            :headers="tokenBody"
            list-type="picture-card"
            :on-remove="handleRemoveStudent"
            :on-success="hanleSuccessStudent"
            limit="1"
            ><el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="senderDialog = false">取消</el-button>
          <el-button type="primary" @click="applySenderShip">申请</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-card style="max-width: 480px; margin-top: 50px; margin-left: 40px">
      <template #header>
        <div class="card-header">
          <span>配送员资格申请</span>
        </div>
      </template>
      <p>
        当前你的配送员资格:{{
          senderFlag == -1
            ? "没有审核"
            : senderFlag == 0
            ? "待审核"
            : senderFlag == 1
            ? "通过审核"
            : "审核未通过"
        }}
      </p>
      <template #footer>
        <el-button
          type="primary"
          :disabled="senderFlag == 0 || senderFlag == 1"
          @click="ApplySender"
          >{{
            senderFlag == -1
              ? "立即申请"
              : senderFlag == 0
              ? "待审核中"
              : senderFlag == 1
              ? "已通过审核"
              : "再次审核"
          }}</el-button
        >
        <el-button type="warning" @click="getSenderInfo">更新状态</el-button>
      </template>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import Vue, { ref } from "vue";
import axios from "axios";
import { ElMessage, UploadFile } from "element-plus";
import type { UploadProps, UploadUserFile } from "element-plus";
const senderFlag = ref(-1);
const token = localStorage.getItem("student_auth_token");
const senderDialog = ref(false);
const tokenBody = ref({
  token: token,
});

const form = ref({
  idCardImg: "",
  idCardCopyImg: ref<UploadUserFile[]>([]),
  studentImg: "",
  StudentCopyImg: ref<UploadUserFile[]>([]),
  phone: "",
});

//身份证移除
const handleRemoveIdcard: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  form.value.idCardCopyImg = [];
};

//身份证添加
const hanleSuccessIdcard: UploadProps["onSuccess"] = (res) => {
  const url = res.message;
  form.value.idCardCopyImg = [];
  form.value.idCardCopyImg.push({
    name: "hhe",
    url: res.message,
  });
  form.value.idCardImg = res.message;
};

//学生证移除
const handleRemoveStudent: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  form.value.StudentCopyImg = [];
};
const hanleSuccessStudent: UploadProps["onSuccess"] = (res) => {
  const url = res.message;
  form.value.StudentCopyImg = [];
  form.value.StudentCopyImg.push({
    name: "hhe",
    url: res.message,
  });
  form.value.studentImg = res.message;
};

const getSenderInfo = () => {
  axios
    .get("/api/sender/senderInfo", {
      headers: {
        token: token,
      },
    })
    .then((res) => {
      console.log("code line-31 \n\r😉 res:\n\r", res);
      if (res.data.success) {
        senderFlag.value = res.data.message.isPass;
      }
    })
    .catch((err) => {
      console.log("code line-35 \n\r😄 err:\n\r", err);
    });
};

const applySenderShip = () => {
  const req = {
    idcardImg: form.value.idCardImg,
    studentImg: form.value.studentImg,
    phone: form.value.phone,
  };
  axios
    .post("/api/sender/apply", req, {
      headers: {
        token: token,
      },
    })
    .then((res) => {
      // console.log("code line-167 \n\r😁 res:\n\r", res);
      if (res.data.success) {
        ElMessage({
          type: "success",
          message: "申请成功，待审核",
        });
      } else {
        ElMessage({
          type: "error",
          message: res.data.message,
        });
      }
    })
    .catch((err) => {});
  senderDialog.value = false;
};

const ApplySender = () => {
  senderDialog.value = true;
};
getSenderInfo();
</script>

<style lang="" scoped></style>
